<template>
	<view>
		<view class="Group-name-title">
			群名称<text>*</text>
		</view>
		<u-input placeholder="输入群名称" border="surround" v-model="groupName" @input="groupNameInputHandler" maxlength="24"
			type="text" class="Group-name">
			<template slot="suffix">
				{{ groupNameAdjustedLength }}/{{ groupNameMaxLength }}
			</template>
		</u-input>
		<view v-show="showGroupNamePrompt" class="prompt">群名称最多24个字</view>
		<view class="spectacle">
			<view class="spectacle-title">
				<view class="spectacle-name">
					公开展示
				</view>
				<view class="spectacle-hint">
					关闭后，将不在群聊广场和个人页面展示群聊
				</view>
			</view>
			<view class="Display-switch">
				<u-switch v-if="" v-model="value3" size="30" activeColor="red" inactiveColor="darkgray"></u-switch>
			</view>
		</view>
		<view class="Public-display-content" v-show="value3">
			<view class="Group-chat-notes">
				<u--textarea v-model="value1" placeholder="用一段话介绍你的群聊，例:欢迎雅思口语冲7的朋友们进群!群里可以找口语搭子互相帮助~注意只能聊英语相关话题哦"
					class="Note-content" height="130" maxlength="100"></u--textarea>
				<view class="bottom-panel">
					<view class="left-panel">
						<u-checkbox-group>
							<u-checkbox v-model="checked" shape="circle" label="生成笔记并发布" labelSize="30rpx" size="30rpx"
								activeColor="red"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="right-panel">
						{{ value1.length }}/{{ panelMaxLength }}
					</view>
				</view>
			</view>
			<view class="Group-chat-type-name">
				群聊类型
			</view>
			<view class="Group-chat-type-box">
				<view class="City-life" @click="handleTagClick('City-life')"
					:class="{ 'active': activeTag === 'City-life'}">
					同城生活
				</view>
				<view class="learning-exchange" @click="handleTagClick('learning-exchange')"
					:class="{ 'active': activeTag === 'learning-exchange' }">
					学习交流
				</view>
				<view class="self-clocking" @click="handleTagClick('self-clocking')"
					:class="{ 'active': activeTag === 'self-clocking'}">
					自律打卡
				</view>
				<view class="Job-search-support" @click="handleTagClick('Job-search-support')"
					:class="{ 'active': activeTag === 'Job-search-support'}">
					求职互助
				</view>
				<view class="Shopping-list" @click="handleTagClick('Shopping-list')"
					:class="{ 'active': activeTag === 'Shopping-list'}">
					购物拼单
				</view>
				<view class="Game-black" @click="handleTagClick('Game-black')"
					:class="{ 'active': activeTag === 'Game-black'}">
					游戏开黑
				</view>
				<view class="Interest-exchange" @click="handleTagClick('Interest-exchange')"
					:class="{ 'active': activeTag === 'Interest-exchange'}">
					兴趣交流
				</view>
				<view class="chatter" @click="handleTagClick('chatter')" :class="{ 'active': activeTag === 'chatter'}">
					闲聊唠嗑
				</view>
				<view class="elses" @click="handleTagClick('elses')" :class="{ 'active': activeTag === 'elses'}">
					其他
				</view>
			</view>
			<view class="place-name">
				地点
			</view>
			<view class="place-box">
				<u--input placeholder="请选择地点" shape="circle" class="place-title" disabledColor="#fff"></u--input>
			</view>
		</view>

		<footer class="Create-now">
			<button class="establish" @click="show = true" :disabled="isCreateDisabled"
				:style="{ backgroundColor: isCreateDisabled ? 'rgba(251,74,62,0.5)' : '', color: isCreateDisabled ? '#fff' : '' }">立即创建</button>
			<view class="Group-chat-convention">
				为维护群内信息生态健康，请遵循<text>《群聊公约》</text>
			</view>
		</footer>
		<u-popup :show="show" mode="center" :round="20">
			<view class="Create-the-note-pop-up">
				<view class="Pop-up-content">
					<view class="up-contents">
						通过笔记可以吸引更多人加入群聊,要生成笔记并发布吗？
					</view>
				</view>
				<view class="Generate-notes-for-publication" @click="publication">
					生成笔记并发布
				</view>
				<view class="No-thank-you" @click="Nothank">
					不了谢谢
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupName: "",
				panelContent: "",
				groupNameMaxLength: 24, // 群名称最大字符数
				panelMaxLength: 100, // 折叠面板最大字符数
				showGroupNamePrompt: false,
				maxLimitPromptMessage: "群名称最多24个字", // 最大限制提示消息
				value3: true,
				value1: '',
				checked: "",
				activeTag: '',
				show: false
			}
		},
		computed: {
			groupNameAdjustedLength() {
				return this.groupName.length;
			},
			panelContentAdjustedLength() {
				return this.panelContent.length;
			},
			isCreateDisabled() {
				return this.groupName.trim() === ""; // 如果群名称为空，则返回 true，禁用按钮；否则返回 false，启用按钮
			},
		},
		methods: {
			groupNameInputHandler(event) {
				if (this.groupName.trim() === '' && event.data === ' ') {
					event.preventDefault();
					return;
				}
				if (this.groupNameAdjustedLength > this.groupNameMaxLength) {
					this.groupName = this.groupName.slice(0, this.groupNameMaxLength);
					this.showGroupNamePrompt = true;
				} else {
					this.showGroupNamePrompt = false;
				}

				// 如果输入字符达到最大限制，显示提示框
				if (this.groupNameAdjustedLength >= this.groupNameMaxLength) {
					this.showMaxLimitPrompt = true;
					setTimeout(() => {
						this.showMaxLimitPrompt = false;
					}, 2000); // 2秒后隐藏提示框
				}
			},
			handleTagClick(tag) {
				if (this.activeTag === tag) {
					this.activeTag = ''; // 如果点击的是已经激活的标签，则取消激活状态
				} else {
					this.activeTag = tag; // 否则设置当前点击的标签为激活状态
				}
			},
			publication(){
				this.show = false
			},
			Nothank(){
				this.show = false
			}
		}
	}
</script>

<style scoped>
	/* 页面背景颜色 */
	page {
		background: rgb(246, 246, 246);
	}

	/* 群名称* */
	.Group-name-title {
		width: 100%;
		height: 80rpx;
		display: flex;
		margin-top: 20rpx;
		align-items: center;
		margin-left: 50rpx;
	}

	/* 设置红色* */
	.Group-name-title text {
		color: red;
	}

	/* 群名称输入框 */
	.Group-name {
		background-color: white;
		border-radius: 30rpx;
		width: 90%;
		height: 60rpx;
		margin-left: 2.5%;
		margin-bottom: 30rpx;
	}

	/* 字符达到限定数后的提示框 */
	.prompt {
		width: 300rpx;
		height: 80rpx;
		background-color: #181818;
		border-radius: 50rpx;
		margin: auto;
		margin-top: 490rpx;
		color: white;
		text-align: center;
		line-height: 80rpx;
	}

	.Public-display-content {
		display: flex;
		flex-wrap: wrap;
	}

	.spectacle {
		width: 95%;
		height: 150rpx;
		background-color: white;
		border-radius: 30rpx;
		margin-left: 2.5%;
		display: flex;
	}

	.spectacle-title {
		width: 80%;
		height: 150rpx;
		/* background-color: red; */
	}

	.Note-content {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.spectacle-name {
		width: 90%;
		height: 50rpx;
		/* background-color: aqua; */
		font-size: 34rpx;
		margin-top: 40rpx;
		margin-left: 40rpx;
	}

	.spectacle-hint {
		width: 100%;
		height: 30rpx;
		/* background-color:gold; */
		margin-left: 40rpx;
		color: darkgray;
		font-size: 24rpx;
	}

	.Display-switch {
		width: 20%;
		height: 150rpx;
		/* background-color: aquamarine; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.Public-display-content {
		display: flex;
	}

	.Group-chat-notes {
		width: 95%;
		height: 350rpx;
		background-color: white;
		margin-left: 2.5%;
		border-radius: 0 0 30rpx 30rpx;
		margin-top: -15rpx;
		border-top: 1rpx solid rgba(227, 223, 221,0.5);
	}

	.bottom-panel {
		width: 100%;
		height: 70rpx;
		/* background-color: aqua; */
		display: flex;
	}

	.left-panel {
		width: 50%;
		height: 60rpx;
		/* background-color: lawngreen; */
		margin-left: 20rpx;
		padding-top: 10rpx;
	}

	.right-panel {
		width: 50%;
		height: 60rpx;
		/* background-color: brown; */
		text-align: end;
		padding-right: 40rpx;
	}

	.place-name,
	.Group-chat-type-name {
		display: flex;
		width: 95%;
		height: 100rpx;
		line-height: 100rpx;
		margin-left: 2.5%;
		padding-left: 40rpx;
		color: darkgray;
		/* background-color: red; */
	}

	.Group-chat-type-box {
		width: 95%;
		height: 360rpx;
		margin-left: 2.5%;
		background-color: #fff;
		border-radius: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: center;
	}

	.City-life,
	.learning-exchange,
	.self-clocking,
	.Job-search-support,
	.Shopping-list,
	.Game-black,
	.Interest-exchange,
	.chatter,
	.elses {
		width: 180rpx;
		height: 80rpx;
		background-color: rgb(246, 244, 243);
		text-align: center;
		line-height: 80rpx;
		border-radius: 10rpx;
	}

	.City-life.active,
	.learning-exchange.active,
	.self-clocking.active,
	.Job-search-support.active,
	.Shopping-list.active,
	.Game-black.active,
	.Interest-exchange.active,
	.chatter.active,
	.elses.active {
		background-color: rgb(254, 237, 239);
		color: red;
	}

	.place-box {
		width: 100%;
		height: 80rpx;
	}

	.place-title {
		width: 90%;
		height: 80rpx;
		background-color: #fff;
		margin-left: 2.5%;
		position: relative;
		/* 让伪元素相对于该元素定位 */
	}

	.place-title::after {
		content: '';
		/* 清空伪元素内容 */
		background-image: url("../../static/MessageImg/youtubiao.png");
		/* 替换为你的箭头图片 URL */
		background-size: contain;
		/* 调整图片大小以适应容器 */
		background-repeat: no-repeat;
		/* 禁止图片重复 */
		width: 28rpx;
		/* 设置图片宽度 */
		height: 28rpx;
		/* 设置图片高度 */
		position: absolute;
		/* 绝对定位 */
		right: 20rpx;
		/* 距离右侧的位置 */
		top: 50%;
		/* 垂直居中 */
		transform: translateY(-50%);
		/* 垂直居中 */
	}

	/* 全局提示框样式 */
	.global-prompt {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		padding: 10px 20px;
		border-radius: 10px;
	}

	/* 底部固定定位 */
	.Create-now {
		width: 100%;
		height: 150rpx;
		background-color: rgb(246, 246, 246);
		padding-top: 20rpx;
		text-align: center;
		position: fixed;
		bottom: 0;
	}

	/* 创建按钮 */
	.establish {
		width: 90%;
		height: 80rpx;
		background-color: red;
		line-height: 80rpx;
		border-radius: 50rpx;
		color: #fff;
	}

	/* 群聊公约文字大小 */
	.Group-chat-convention {
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	/* 跳转群聊公约的颜色*/
	.Group-chat-convention text {
		color: blue;
	}
	.Create-the-note-pop-up{
		width: 550rpx;
		height: 400rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.Pop-up-content{
		width: 100%;
		height:190rpx ;
		/* background-color: antiquewhite; */
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid rgba(227, 223, 221,0.5);
	}
	.up-contents{
		width: 90%;
		height: 50%;
		text-align: center;
	}
	.Generate-notes-for-publication{
		width: 100%;
		height: 105rpx;
		/* background-color: #181818; */
		color: red;
		text-align: center;
		line-height: 105rpx;
	}
	.No-thank-you{
		width: 100%;
		height: 105rpx;
		/* background-color: aqua; */
		text-align: center;
		line-height: 105rpx;
		border-top: 1rpx solid rgba(227, 223, 221,0.5);
		color: rgb(196, 196, 196);
	}
</style>